<template>
    <div class="okumasan-cleaner">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit" :action="action" ></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white m-0 p-0">
                <item-table title="Cleaner List" :columns="defaultColumns" :total="total" :data="data" :loading="tableLoading" @sort="sort"
                            :model="model" isAdd @add="addItem"  isExport @export="exportExcel">
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                    <template slot="cleaner_time" slot-scope="props">
                        <v-popover offset="24" placement="right" autoHide trigger="manual"
                                   popoverBaseClass="clean-time-tooltip clean-time-popover" :ref="`time${props.item.id}`"
                        >
                            <button class="btn-xs btn btn-primary" @click="toggleCleanTime(props.item.id)">Select Time</button>
                            <template slot="popover">
                                <p>{{props.item.okumasan_cleaner_name}}</p>
                                <clean-time :show="doms[`time${props.item.id}`] && doms[`time${props.item.id}`].isOpen"
                                            :id="props.item.id"></clean-time>
                            </template>
                        </v-popover>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    import CleanTime from '@/components/widgets/CleanTime'
    // utlis
    import {toJsonData} from '@/utils'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'

    export default {
        name: "OkumasanCleaner",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail, CleanTime},
        mixins: [lifeHookMixin, itemMixin],
        created() {
          this.timeModel = 'OkumasanCleanerTime'
        },
        data() {
            return {
                doms : {},
                times: []
            }
        },
        methods: {
            toggleCleanTime(id) {
                this.doms = this.$refs
                let dom = this.$refs[`time${id}`]
                if (!dom.isOpen) {
                    dom.show()
                } else {
                    dom.hide()
                }
            },
        },
    }
</script>

<style lang="stylus">
    .clean-time-tooltip
        &.clean-time-popover
            color: #f9f9f9;
        .popover-inner
            max-width :500px;
            background: #f8f8f8;
            color: black;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 0 5px 30px rgba(black, .1);
        .popover-arrow
            border-color: #f8f8f8;
            border-width: 5px 5px 5px 0;
            border-left-color: transparent !important;
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            left: -5px;
            margin-left: 0;
            margin-right: 0;
</style>